/**
* 需求申请
*/
<template>
	<vp-main-page @refresh="loadDataList" :tableRef="tableRef">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList"
				label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="ztList">
							<template #label><vp-label zh="状态" en="Status" /></template>
							<el-select class="w100" v-model="searchForm.ztList" clearable multiple collapse-tags>
								<el-option :value="10" label="保存 Save"></el-option>
								<el-option :value="88" label="审批中 Processing"></el-option>
								<el-option :value="89" label="已审批 Processed"></el-option>
								<el-option :value="98" label="作废 Invalid"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item field="dateList">
							<template #label><vp-label zh="申请日期" en="" /></template>
							<el-date-picker v-model="searchForm.dateList" type="daterange"
								start-placeholder="开始日期/Start Date" end-placeholder="结束日期/End Date"
								value-format="YYYY-MM-DD" unlink-panels range-separator="-" style="width: 100%">
							</el-date-picker>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="bh">
							<template #label><vp-label zh="编号" en="" /></template>
							<el-input v-model="searchForm.bh" v-trim></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="zwms">
							<template #label><vp-label zh="名称" en="Name" /></template>
							<el-input v-model="searchForm.zwms" v-trim></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="jh">
							<template #label><vp-label zh="件号/产品名" en="" /></template>
							<el-input v-model="searchForm.jh" v-trim></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="xqlb">
							<template #label><vp-label zh="需求类别" en="" /></template>
							<VpDictSelect :lxid="404" :selectedId="searchForm.xqlb"
								@dictSelected="obj => { searchForm.xqlb = obj; }" style="width:100%">
							</VpDictSelect>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList" />
						<vp-btn-reset @click="handleSearchReset" />
						<vp-btn-more @change="showMore = $event" />
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<vp-btn-add v-auth="'materialMaterialDemand.edit'" @click="handleAdd" />
		</template>
		<template #table>
			<vp-vxe-table id="baseDataModel" ref="tableRef" :data="tableData" row-key="id" v-loading="loading">
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column field="bh" show-overflow width="100">
					<template #header><vp-label zh="编号" en="" /></template>
				</vxe-column>
				<vxe-column field="zt" show-overflow width="160">
					<template #header><vp-label zh="状态" en="Status" /></template>
					<template #default="scope">
						{{
							scope.row.zt === 10 ? '草稿 Draft' :
								scope.row.zt === 88 ? '审批中 Processing' :
									scope.row.zt === 89 ? '生效/Effect' :
										scope.row.zt === 98 ? '作废 Invalid' : ''
						}}
					</template>
				</vxe-column>
				<vxe-column field="xqlb" show-overflow width="100">
					<template #header><vp-label zh="需求类别" en="" /></template>
				</vxe-column>
				<vxe-column field="jjcd" show-overflow width="100">
					<template #header><vp-label zh="紧急程度" en="" /></template>
					<template #default="{ row }">
						{{
							row.jjcd === 10 ? '普通' :
								row.jjcd === 20 ? '加快' :
									row.jjcd === 30 ? '紧急' :
										row.jjcd === 40 ? '停飞' : ''
						}}
					</template>
				</vxe-column>
				<vxe-column field="yqdhrq" show-overflow width="100">
					<template #header><vp-label zh="要求到货期" en="" /></template>
				</vxe-column>

				<vxe-column field="actTypeName" show-overflow width="200">
					<template #header><vp-label zh="机型" en="Applicable AC Type" /></template>
				</vxe-column>
				<vxe-column field="xqyy" show-overflow min-width="100">
					<template #header><vp-label zh="需求原因/故障" en="" /></template>
					<template #default="scope">
						<span style="white-space:pre">{{ scope.row.xqyy }}</span>
					</template>
				</vxe-column>
				<vxe-column field="sqrxm" show-overflow width="100">
					<template #header><vp-label zh="申请人" en="" /></template>
				</vxe-column>
				<vxe-column field="sqsj" show-overflow width="160">
					<template #header><vp-label zh="申请时间" en="" /></template>
				</vxe-column>
				<vxe-column field="operation" title="操作 Operations" fixed="right" width="140">
					<template #header><vp-label-operations /></template>
					<template #default="scope">
						<el-space>
							<vp-btn-edit v-if="scope.row.zt == 10" v-auth="'materialMaterialDemand.edit'" text
								@click="handleEdit(scope.row)" />
							<vp-btn-del v-if="scope.row.zt == 10" v-auth="'materialMaterialDemand.edit'" text
								@click="handleDelete(scope.row)" />
							<vp-btn-view text @click="handleView(scope.row)" />
						</el-space>
					</template>
				</vxe-column>
			</vp-vxe-table>
		</template>

		<template #pagination>
			<vp-pagination @change="loadDataList" :total="page.total" v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize">
			</vp-pagination>
		</template>
		<EditMaterialDemand ref="commRef" @formSubmited="handleFormSubmited"></EditMaterialDemand>
	</vp-main-page>
</template>
<script setup lang="ts" name="materialMaterialDemand">
import { onMounted, reactive, ref } from 'vue'
import request from '/@/utils/request';
import { DEFAULT_PAGE } from '/@/utils/page';
import EditMaterialDemand from './component/EditMaterialDemand.vue';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import VpDictSelect from '/@/components/vp/dict/VpDictSelect.vue';

import { useRouter } from 'vue-router';
const router = useRouter();


const searchForm = reactive({
	bh: '',
	ztList: [],
	jh: "",
	zwms: "",
	xqlb: "",
	dateList: [],
});

const page = reactive({
	...DEFAULT_PAGE,
})

const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

// 加载列表数据
const loadDataList = () => {
	loading.value = true
	request.get('/material/demand/pageList', {
		params: {
			...searchForm,
			...page
		}
	}).then(res => {
		tableData.value = res?.data?.list || []
		page.total = res?.data?.total || 0
		page.pageNum = res?.data?.pageNum || 1;
	}).finally(() => {
		loading.value = false;
	})
}

const searchFormRef = ref();
// 重置搜索条件
const handleSearchReset = () => {
	searchForm.dateList = [];
	searchForm.ztList = [];
	searchForm.jh = "";
	searchForm.zwms = "";
	searchForm.bh = "";
	searchForm.xqlb = "";
	searchFormRef.value.resetFields();
	loadDataList();
}

onMounted(() => {
	loadDataList();
})

const commRef = ref();
const tableRef = ref();

const handleAdd = () => {
	commRef.value.handleOpen({
		type: 'add'
	});
}

const handleEdit = (row: any) => {
	commRef.value.handleOpen({
		type: 'edit',
		id: row.id
	});
}

const handleFormSubmited = () => {
	loadDataList();
}

const handleView = (row: any) => {
	router.push({
		name: "viewMaterialDemand",
		params: {
			id: row.id,
		},
	})
}

// 删除
const handleDelete = (row: any) => {
	VpMessageBox.confirmDelete().then(() => {
		loading.value = true;
		request.delete(`/material/demand/${row.id}`).then(res => {
			loadDataList();
		}).catch(() => { }).finally(() => {
			loading.value = false;
		})
	});
}

const basedataModelSelectedHandle = (data: any) => {
	searchForm.acTypeList = data;
}

</script>